<script setup>
import { ref,reactive,computed,watch,onMounted ,nextTick} from "vue";
import { notification } from 'ant-design-vue';
import LinkMan from "@/components/linkMan.vue"
import Chat from "@/components/chat.vue"
import {getMessageAll} from "@/api/chat"
import {createWebSocket} from "@/api/webSocket"
import { useStore } from "@/pinia";
import { useRouter } from "vue-router";
const store=useStore()
const router=useRouter()
const ws=createWebSocket();
onMounted(()=>{
	console.log("1111111111111111111111111:",1111111111111111111111111);
})
{
	ws.onopen = function () {

	//当WebSocket创建成功时，触发onopen事件

	console.log("open");


	}

	ws.onmessage = function (e) {
		try{
			const data=JSON.parse(e.data)
			console.log("WebSocket data:",data);
			records.forEach(item=>{
				if(item.uid===data.id){
					data.uid=data.id
					data.state=1
					data.isMe=false
					data.loading=false
					delete data.id
					item.info.push(data)
					sendNotification(data.uid+":"+data.message)
				}
			})
		}catch(err){
			console.log("err:",err);
		}
	}
function sendNotification(body) {
	if(false&&document.hidden===true){//通知到桌面
		// if (window.Notification.permission == "granted") { // 判断是否有权限
		// 	new Notification("新消息", {
		// 		body: body,
		// 		//   icon: 'https://pic1.zhuanstatic.com/zhuanzh/50b6ffe4-c7e3-4317-bc59-b2ec4931f325.png'
		// 	})
		// } else if (window.Notification.permission != "denied") { 
		// 	window.Notification.requestPermission(function (permission) { // 没有权限发起请求
		// 		new Notification("新消息", {
		// 			body: body,
		// 			//   icon: 'https://pic1.zhuanstatic.com/zhuanzh/50b6ffe4-c7e3-4317-bc59-b2ec4931f325.png'
		// 		})
		// 	});
		// }
	}else{
		notification.open({
        message: '新消息',
        description:body,
        onClick: () => {
          console.log('Notification Clicked!');
        },
      });
	}
}
	ws.onclose = function (e) {

	//当客户端收到服务端发送的关闭连接请求时，触发onclose事件

	console.log("close");

	}

	ws.onerror = function (e) {

	//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件

	console.log(error);

	}
}
const records=reactive([])
const state=reactive({
	session:null,
})
getMessageAll().then(res=>{
	console.log("res:",res);
	if(res.code===0){
		const data=res?.data[0]
		if(data){
			records.push(...data.records)
		}
	}
})

function setSession(e){
	state.session=e
}
function addRecords(e){
	if(!records.some((item,index)=>{
		if(item.uid===e.uid){
			setSession(records[index])
			return true
		}
		return false
	})){
		records.push(e)
		setSession(e)
	}
}
function exitLogin(){
	store.exitLogin()
	router.push("/login")
}
</script>


<template>
	<div class="header">
		<div class="exit" @click="exitLogin">退出</div>
		当前用户：{{store.username}}
	</div>
	<div class="page">
		<LinkMan :records="records" @select="setSession" @addRecords="addRecords"></LinkMan>
		<Chat :session="state.session" v-if="state.session"></Chat>
	</div>
</template>


<style scoped>
.exit{
	cursor: pointer;
	text-decoration: underline;
	margin-left: 1rem;
}
.header{
	height: 2rem;
	background-color: #fff;
	display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 0 1rem;
	font-size: 12px;
}
.page{
	display: flex;
	flex-direction: row;
	height: calc( 100vh - 2rem );
	overflow: hidden;
}
</style>